<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本用法</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        function f1() {
            console.log("静态绑定事件");
        }

        // window.onload = function(){
        //     document.getElementById("btn").onclick = function(){
        //         console.log("动态绑定事件")
        //     }
        // }
        // 在jquery中,所有函数都是封装过的,因此必须通过jquery对象进行调用
        // $(DOM对象):DOM对象 --> jquery对象
        // $(document).ready(function(){
        //     // $("选择器语法"):获取指定元素
        //     // 相当于document.querySelectorAll("选择器语法")
        //     $("#btn").click(function(){
        //         console.log("使用jquery动态绑定事件")
        //     });
        // });
        // juqey对页面加载事件进行了简化,最终将$(document).ready(fn)简化为$(fn)
        $(function () {
            // $("选择器语法"):获取指定元素
            // 相当于document.querySelectorAll("选择器语法")
            $("#btn").click(function () {
                console.log("使用jquery动态绑定事件")
                // jquery对象只能调用jquery函数
                // DOM对象只能调用DOM函数
                console.log(document.getElementById("btn").innerHTML)
                // 在jquery,可以将jquery对象转换成DOM对象
                // jquery对象[0]或者jquery对象.get(0)的方式进行转换
                console.log($("#btn")[0].innerHTML)
                console.log($("#btn").get(0).innerHTML)
                // jquery函数
                console.log($("#btn").html())
                $("#btn").html("html函数赋值");
                // 在js中,存在一个关键字this,表示触发当前事件的元素
                // console.log(this.html());    // 报错
                console.log(this.innerHTML);    // 成功
                // 由于通过this调用jquery函数报错,调用DOM函数成功
                // 说明this表示一个DOM对象
                // 因此,通过this想要调用jquery函数,必须先将this转换成jquery对象,即:$(this)
                console.log($(this).html())

            });
        });
    </script>
</head>
<body>
<button onclick="f1()">静态绑定</button>
<br>
<button id="btn">动态绑定</button>
<br>
</body>
</html>